import React, { Component } from "react";
import "./Todo.css";
import TodoHeader from "../TodoHeader/TodoHeader";
import TodoMain from "../TodoMain/TodoMain";
import TodoFooter from "../TodoFooter/TodoFooter";
import { nanoid } from 'nanoid'

export default class Todo extends Component {
    state = {
        todos: [
            { id: 1, title: "记忆10个数组方法", done: false },
            { id: 2, title: "吃元宵", done: true },
            { id: 3, title: "参加同学聚会", done: true },
        ],
    };

    render() {
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <TodoHeader addTodo={this.addTodo} />
                    <TodoMain 
                        todos={this.state.todos} 
                        checkTodo={this.checkTodo} 
                        removeTodo={this.removeTodo} /> 
                    <TodoFooter
                        checkAllTodos={this.checkAllTodos}
                        todos={this.state.todos}
                        removeAllDoneTodos={this.removeAllDoneTodos}
                    />
                </div>
            </div>
        );
    }

    //新增任务的方法封装
    addTodo = (title) => {
        //创建新任务的对象
        let obj = {
            id: nanoid(),
            title: title,
            done: false,
        };

        //修改状态
        this.setState({
            todos: [...this.state.todos, obj],
        });
    };

    //更新某个任务的完成状态
    checkTodo = (id, status) => {
        //获取所有的任务
        let { todos } = this.state;
        //处理数组
        let newTodos = todos.map((item) => {
            if (item.id === id) {
                //修改该对象的状态
                item.done = status;
            }
            return item;
        });
        //修改状态
        this.setState({
          todos: newTodos
        })
    };

    //删除某个任务 3
    removeTodo = (id) => {
        let {todos} = this.state;
        //过滤 保留跟 id 不同的任务
        let newTodos = todos.filter(item => item.id !== id);
        //修改状态
        this.setState({
            todos: newTodos
        })
    }

    //修改全部任务的状态
    checkAllTodos = (status) => {
        //
        let {todos} = this.state;
        //map
        let newTodos = todos.map(item => {
            item.done = status;
            return item; 
        });
        //修改状态
        this.setState({
            todos: newTodos
        })
    }

    //清空所有已经完成的任务
    removeAllDoneTodos = () => {
        //获取所有的任务
        let {todos} = this.state;
        //过滤 保留未完成的任务
        let newTodos = todos.filter(item => !item.done);
        //状态修改
        this.setState({
            todos: newTodos
        })
    }

    componentDidMount() {
        //测试 addTodo
        // this.addTodo('测试任务');
        //测试 checkTodo
        // this.checkTodo(2, false);
        //测试删除 removeTodo
        // this.removeTodo(3);

        //测试修改全部任务的方法
        // this.checkAllTodos(false);

        //测试 removeAllDoneTodos
        // this.removeAllDoneTodos();

        // let arr = [2,4,6,9];
        // console.log(arr.every(item => item % 2 === 0));
    }
}
